{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<!--BOOK_INFORMATION-->\n",
    "<a href=\"https://user-images.githubusercontent.com/19553554/71825144-2d568180-30d6-11ea-8ee0-63c849cfd934.png\" target=\"_blank\"><img align=\"left\" style=\"width: 76px; height: 100px; background: white; padding: 1px; border: 1px solid black; margin-right:10px;\"></a>\n",
    "*pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒，为了与 Python 进行对接，方便在 Python 中直接使用数据生成图，于是有人开发出了这个项目[GitHub](https://github.com/pyecharts/pyecharts) .*\n",
    "\n",
    "*Note.建议本程序在参看https://github.com/pyecharts/pyecharts 的安装步骤后再运行； 本程序所有的例子都是从官方提供的样例代码[GitHub](https://github.com/pyecharts/pyecharts-gallery)中提取的,如果对某个API有疑问建议在IDE里面查看*\n",
    "\n",
    "*Echart类型图种大全:https://echarts.apache.org/examples/zh/#chart-type-line pyecharts图导入到ppt中的方法:https://baijiahao.baidu.com/s?id=1663839456876951842&wfr=spider&for=pc.*\n",
    "\n",
    "*作者: LBQ; 时间:2020/7/24. 邮箱:779660843@qq.com*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# XIV.网格图(Grid)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "网格图一般用作衬托"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 直方图-网格图-地理图简单示例 "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'china':'https://assets.pyecharts.org/assets/maps/china'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"fe977ed677f04a779a88ed02c99dadb7\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'china'], function(echarts) {\n",
       "                var chart_fe977ed677f04a779a88ed02c99dadb7 = echarts.init(\n",
       "                    document.getElementById('fe977ed677f04a779a88ed02c99dadb7'), 'white', {renderer: 'canvas'});\n",
       "                var option_fe977ed677f04a779a88ed02c99dadb7 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                127,\n",
       "                40,\n",
       "                26,\n",
       "                71,\n",
       "                45,\n",
       "                99,\n",
       "                121\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                32,\n",
       "                71,\n",
       "                99,\n",
       "                130,\n",
       "                145,\n",
       "                149,\n",
       "                133\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"scatter\",\n",
       "            \"name\": \"geo\",\n",
       "            \"coordinateSystem\": \"geo\",\n",
       "            \"symbolSize\": 12,\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u5e7f\\u4e1c\",\n",
       "                    \"value\": [\n",
       "                        113.26653,\n",
       "                        23.132191,\n",
       "                        45\n",
       "                    ]\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u5317\\u4eac\",\n",
       "                    \"value\": [\n",
       "                        116.407526,\n",
       "                        39.90403,\n",
       "                        132\n",
       "                    ]\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u4e0a\\u6d77\",\n",
       "                    \"value\": [\n",
       "                        121.473701,\n",
       "                        31.230416,\n",
       "                        114\n",
       "                    ]\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u6c5f\\u897f\",\n",
       "                    \"value\": [\n",
       "                        115.909228,\n",
       "                        28.675696,\n",
       "                        123\n",
       "                    ]\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u6e56\\u5357\",\n",
       "                    \"value\": [\n",
       "                        112.98381,\n",
       "                        28.112444,\n",
       "                        51\n",
       "                    ]\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u6d59\\u6c5f\",\n",
       "                    \"value\": [\n",
       "                        120.152791,\n",
       "                        30.267446,\n",
       "                        46\n",
       "                    ]\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u6c5f\\u82cf\",\n",
       "                    \"value\": [\n",
       "                        118.763232,\n",
       "                        32.061707,\n",
       "                        66\n",
       "                    ]\n",
       "                }\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"rippleEffect\": {\n",
       "                \"show\": true,\n",
       "                \"brushType\": \"stroke\",\n",
       "                \"scale\": 2.5,\n",
       "                \"period\": 4\n",
       "            },\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"left\": \"20%\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        },\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"geo\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"geo\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u5c0f\\u7c73\",\n",
       "                \"\\u4e09\\u661f\",\n",
       "                \"\\u534e\\u4e3a\",\n",
       "                \"\\u82f9\\u679c\",\n",
       "                \"\\u9b45\\u65cf\",\n",
       "                \"VIVO\",\n",
       "                \"OPPO\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        },\n",
       "        {\n",
       "            \"text\": \"Grid-Geo-Bar\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"top\": \"50%\",\n",
       "            \"right\": \"75%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        },\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"60%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ],\n",
       "    \"geo\": {\n",
       "        \"map\": \"china\",\n",
       "        \"roam\": true,\n",
       "        \"emphasis\": {}\n",
       "    }\n",
       "};\n",
       "                chart_fe977ed677f04a779a88ed02c99dadb7.setOption(option_fe977ed677f04a779a88ed02c99dadb7);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f2e7c45a6a0>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar, Geo, Grid\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "bar = (\n",
    "    Bar()\n",
    "    .add_xaxis(Faker.choose())\n",
    "    .add_yaxis(\"商家A\", Faker.values())\n",
    "    .add_yaxis(\"商家B\", Faker.values())\n",
    "    .set_global_opts(legend_opts=opts.LegendOpts(pos_left=\"20%\"))\n",
    ")\n",
    "geo = (\n",
    "    Geo()\n",
    "    .add_schema(maptype=\"china\")\n",
    "    .add(\"geo\", [list(z) for z in zip(Faker.provinces, Faker.values())])\n",
    "    .set_series_opts(label_opts=opts.LabelOpts(is_show=False))\n",
    "    .set_global_opts(\n",
    "        visualmap_opts=opts.VisualMapOpts(),\n",
    "        title_opts=opts.TitleOpts(title=\"Grid-Geo-Bar\"),\n",
    "    )\n",
    ")\n",
    "\n",
    "grid = (\n",
    "    Grid()\n",
    "    .add(bar, grid_opts=opts.GridOpts(pos_top=\"50%\", pos_right=\"75%\"))\n",
    "    .add(geo, grid_opts=opts.GridOpts(pos_left=\"60%\"))\n",
    "    #.render(\"grid_geo_bar.html\")\n",
    ")\n",
    "grid.load_javascript()\n",
    "grid.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 网格图-散点图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"7399bb524b8240479dfda07a57aa8f2c\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_7399bb524b8240479dfda07a57aa8f2c = echarts.init(\n",
       "                    document.getElementById('7399bb524b8240479dfda07a57aa8f2c'), 'white', {renderer: 'canvas'});\n",
       "                var option_7399bb524b8240479dfda07a57aa8f2c = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"scatter\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"symbolSize\": 10,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u53ef\\u4e50\",\n",
       "                    24\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u96ea\\u78a7\",\n",
       "                    102\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u6a59\\u6c41\",\n",
       "                    106\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u7eff\\u8336\",\n",
       "                    132\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5976\\u8336\",\n",
       "                    112\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u767e\\u5a01\",\n",
       "                    132\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u9752\\u5c9b\",\n",
       "                    31\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"right\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"scatter\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"symbolSize\": 10,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u53ef\\u4e50\",\n",
       "                    49\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u96ea\\u78a7\",\n",
       "                    90\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u6a59\\u6c41\",\n",
       "                    135\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u7eff\\u8336\",\n",
       "                    118\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5976\\u8336\",\n",
       "                    22\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u767e\\u5a01\",\n",
       "                    39\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u9752\\u5c9b\",\n",
       "                    74\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"right\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"connectNulls\": false,\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u886c\\u886b\",\n",
       "                    110\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u6bdb\\u8863\",\n",
       "                    39\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u9886\\u5e26\",\n",
       "                    139\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u88e4\\u5b50\",\n",
       "                    59\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u98ce\\u8863\",\n",
       "                    54\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                    33\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u889c\\u5b50\",\n",
       "                    29\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"connectNulls\": false,\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u886c\\u886b\",\n",
       "                    86\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u6bdb\\u8863\",\n",
       "                    23\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u9886\\u5e26\",\n",
       "                    21\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u88e4\\u5b50\",\n",
       "                    118\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u98ce\\u8863\",\n",
       "                    131\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                    143\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u889c\\u5b50\",\n",
       "                    69\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"left\": \"20%\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        },\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"right\": \"20%\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u53ef\\u4e50\",\n",
       "                \"\\u96ea\\u78a7\",\n",
       "                \"\\u6a59\\u6c41\",\n",
       "                \"\\u7eff\\u8336\",\n",
       "                \"\\u5976\\u8336\",\n",
       "                \"\\u767e\\u5a01\",\n",
       "                \"\\u9752\\u5c9b\"\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u6bdb\\u8863\",\n",
       "                \"\\u9886\\u5e26\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u98ce\\u8863\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Grid-Scatter\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        },\n",
       "        {\n",
       "            \"text\": \"Grid-Line\",\n",
       "            \"right\": \"5%\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"55%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        },\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"right\": \"55%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_7399bb524b8240479dfda07a57aa8f2c.setOption(option_7399bb524b8240479dfda07a57aa8f2c);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f2e7c18cf60>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Grid, Line, Scatter\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "scatter = (\n",
    "    Scatter()\n",
    "    .add_xaxis(Faker.choose())\n",
    "    .add_yaxis(\"商家A\", Faker.values())\n",
    "    .add_yaxis(\"商家B\", Faker.values())\n",
    "    .set_global_opts(\n",
    "        title_opts=opts.TitleOpts(title=\"Grid-Scatter\"),\n",
    "        legend_opts=opts.LegendOpts(pos_left=\"20%\"),\n",
    "    )\n",
    ")\n",
    "line = (\n",
    "    Line()\n",
    "    .add_xaxis(Faker.choose())\n",
    "    .add_yaxis(\"商家A\", Faker.values())\n",
    "    .add_yaxis(\"商家B\", Faker.values())\n",
    "    .set_global_opts(\n",
    "        title_opts=opts.TitleOpts(title=\"Grid-Line\", pos_right=\"5%\"),\n",
    "        legend_opts=opts.LegendOpts(pos_right=\"20%\"),\n",
    "    )\n",
    ")\n",
    "\n",
    "grid = (\n",
    "    Grid()\n",
    "    .add(scatter, grid_opts=opts.GridOpts(pos_left=\"55%\"))\n",
    "    .add(line, grid_opts=opts.GridOpts(pos_right=\"55%\"))\n",
    "    #.render(\"grid_horizontal.html\")\n",
    ")\n",
    "grid.load_javascript()\n",
    "grid.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 多 Y 轴网格图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"f574227262fb42d4932c21e83ca93ec8\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_f574227262fb42d4932c21e83ca93ec8 = echarts.init(\n",
       "                    document.getElementById('f574227262fb42d4932c21e83ca93ec8'), 'white', {renderer: 'canvas'});\n",
       "                var option_f574227262fb42d4932c21e83ca93ec8 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#5793f3\",\n",
       "        \"#d14a61\",\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                2.0,\n",
       "                4.9,\n",
       "                7.0,\n",
       "                23.2,\n",
       "                25.6,\n",
       "                76.7,\n",
       "                135.6,\n",
       "                162.2,\n",
       "                32.6,\n",
       "                20.0,\n",
       "                6.4,\n",
       "                3.3\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                2.6,\n",
       "                5.9,\n",
       "                9.0,\n",
       "                26.4,\n",
       "                28.7,\n",
       "                70.7,\n",
       "                175.6,\n",
       "                182.2,\n",
       "                48.7,\n",
       "                18.8,\n",
       "                6.0,\n",
       "                2.3\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5e73\\u5747\\u6e29\\u5ea6\",\n",
       "            \"connectNulls\": false,\n",
       "            \"yAxisIndex\": 2,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"1\\u6708\",\n",
       "                    2.0\n",
       "                ],\n",
       "                [\n",
       "                    \"2\\u6708\",\n",
       "                    2.2\n",
       "                ],\n",
       "                [\n",
       "                    \"3\\u6708\",\n",
       "                    3.3\n",
       "                ],\n",
       "                [\n",
       "                    \"4\\u6708\",\n",
       "                    4.5\n",
       "                ],\n",
       "                [\n",
       "                    \"5\\u6708\",\n",
       "                    6.3\n",
       "                ],\n",
       "                [\n",
       "                    \"6\\u6708\",\n",
       "                    10.2\n",
       "                ],\n",
       "                [\n",
       "                    \"7\\u6708\",\n",
       "                    20.3\n",
       "                ],\n",
       "                [\n",
       "                    \"8\\u6708\",\n",
       "                    23.4\n",
       "                ],\n",
       "                [\n",
       "                    \"9\\u6708\",\n",
       "                    23.0\n",
       "                ],\n",
       "                [\n",
       "                    \"10\\u6708\",\n",
       "                    16.5\n",
       "                ],\n",
       "                [\n",
       "                    \"11\\u6708\",\n",
       "                    12.0\n",
       "                ],\n",
       "                [\n",
       "                    \"12\\u6708\",\n",
       "                    6.2\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u84b8\\u53d1\\u91cf\",\n",
       "                \"\\u964d\\u6c34\\u91cf\",\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u84b8\\u53d1\\u91cf\": true,\n",
       "                \"\\u964d\\u6c34\\u91cf\": true,\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"axis\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"cross\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"1\\u6708\",\n",
       "                \"2\\u6708\",\n",
       "                \"3\\u6708\",\n",
       "                \"4\\u6708\",\n",
       "                \"5\\u6708\",\n",
       "                \"6\\u6708\",\n",
       "                \"7\\u6708\",\n",
       "                \"8\\u6708\",\n",
       "                \"9\\u6708\",\n",
       "                \"10\\u6708\",\n",
       "                \"11\\u6708\",\n",
       "                \"12\\u6708\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#5793f3\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 80,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#d14a61\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u6e29\\u5ea6\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#675bba\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} \\u00b0C\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"left\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 25,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": true,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Grid-\\u591a Y \\u8f74\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"5%\",\n",
       "            \"right\": \"20%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_f574227262fb42d4932c21e83ca93ec8.setOption(option_f574227262fb42d4932c21e83ca93ec8);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f2e7c124a58>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar, Grid, Line\n",
    "\n",
    "x_data = [\"{}月\".format(i) for i in range(1, 13)]\n",
    "bar = (\n",
    "    Bar()\n",
    "    .add_xaxis(x_data)\n",
    "    .add_yaxis(\n",
    "        \"蒸发量\",\n",
    "        [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],\n",
    "        yaxis_index=0,\n",
    "        color=\"#d14a61\",\n",
    "    )\n",
    "    .add_yaxis(\n",
    "        \"降水量\",\n",
    "        [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],\n",
    "        yaxis_index=1,\n",
    "        color=\"#5793f3\",\n",
    "    )\n",
    "    .extend_axis(\n",
    "        yaxis=opts.AxisOpts(\n",
    "            name=\"蒸发量\",\n",
    "            type_=\"value\",\n",
    "            min_=0,\n",
    "            max_=250,\n",
    "            position=\"right\",\n",
    "            axisline_opts=opts.AxisLineOpts(\n",
    "                linestyle_opts=opts.LineStyleOpts(color=\"#d14a61\")\n",
    "            ),\n",
    "            axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "        )\n",
    "    )\n",
    "    .extend_axis(\n",
    "        yaxis=opts.AxisOpts(\n",
    "            type_=\"value\",\n",
    "            name=\"温度\",\n",
    "            min_=0,\n",
    "            max_=25,\n",
    "            position=\"left\",\n",
    "            axisline_opts=opts.AxisLineOpts(\n",
    "                linestyle_opts=opts.LineStyleOpts(color=\"#675bba\")\n",
    "            ),\n",
    "            axislabel_opts=opts.LabelOpts(formatter=\"{value} °C\"),\n",
    "            splitline_opts=opts.SplitLineOpts(\n",
    "                is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)\n",
    "            ),\n",
    "        )\n",
    "    )\n",
    "    .set_global_opts(\n",
    "        yaxis_opts=opts.AxisOpts(\n",
    "            name=\"降水量\",\n",
    "            min_=0,\n",
    "            max_=250,\n",
    "            position=\"right\",\n",
    "            offset=80,\n",
    "            axisline_opts=opts.AxisLineOpts(\n",
    "                linestyle_opts=opts.LineStyleOpts(color=\"#5793f3\")\n",
    "            ),\n",
    "            axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "        ),\n",
    "        title_opts=opts.TitleOpts(title=\"Grid-多 Y 轴示例\"),\n",
    "        tooltip_opts=opts.TooltipOpts(trigger=\"axis\", axis_pointer_type=\"cross\"),\n",
    "    )\n",
    ")\n",
    "\n",
    "line = (\n",
    "    Line()\n",
    "    .add_xaxis(x_data)\n",
    "    .add_yaxis(\n",
    "        \"平均温度\",\n",
    "        [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],\n",
    "        yaxis_index=2,\n",
    "        color=\"#675bba\",\n",
    "        label_opts=opts.LabelOpts(is_show=False),\n",
    "    )\n",
    ")\n",
    "\n",
    "bar.overlap(line)\n",
    "grid = Grid()\n",
    "grid.add(bar, opts.GridOpts(pos_left=\"5%\", pos_right=\"20%\"), is_control_axis_index=True)\n",
    "#grid.render(\"grid_multi_yaxis.html\")\n",
    "grid.load_javascript()\n",
    "grid.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 多 X/Y 轴示例"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"f37b29b8b61f4ce49686d145aeef8da5\" style=\"width:1200px; height:800px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_f37b29b8b61f4ce49686d145aeef8da5 = echarts.init(\n",
       "                    document.getElementById('f37b29b8b61f4ce49686d145aeef8da5'), 'white', {renderer: 'canvas'});\n",
       "                var option_f37b29b8b61f4ce49686d145aeef8da5 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#5793f3\",\n",
       "        \"#d14a61\",\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                2.0,\n",
       "                4.9,\n",
       "                7.0,\n",
       "                23.2,\n",
       "                25.6,\n",
       "                76.7,\n",
       "                135.6,\n",
       "                162.2,\n",
       "                32.6,\n",
       "                20.0,\n",
       "                6.4,\n",
       "                3.3\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                2.6,\n",
       "                5.9,\n",
       "                9.0,\n",
       "                26.4,\n",
       "                28.7,\n",
       "                70.7,\n",
       "                175.6,\n",
       "                182.2,\n",
       "                48.7,\n",
       "                18.8,\n",
       "                6.0,\n",
       "                2.3\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5e73\\u5747\\u6e29\\u5ea6\",\n",
       "            \"connectNulls\": false,\n",
       "            \"yAxisIndex\": 2,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"1\\u6708\",\n",
       "                    2.0\n",
       "                ],\n",
       "                [\n",
       "                    \"2\\u6708\",\n",
       "                    2.2\n",
       "                ],\n",
       "                [\n",
       "                    \"3\\u6708\",\n",
       "                    3.3\n",
       "                ],\n",
       "                [\n",
       "                    \"4\\u6708\",\n",
       "                    4.5\n",
       "                ],\n",
       "                [\n",
       "                    \"5\\u6708\",\n",
       "                    6.3\n",
       "                ],\n",
       "                [\n",
       "                    \"6\\u6708\",\n",
       "                    10.2\n",
       "                ],\n",
       "                [\n",
       "                    \"7\\u6708\",\n",
       "                    20.3\n",
       "                ],\n",
       "                [\n",
       "                    \"8\\u6708\",\n",
       "                    23.4\n",
       "                ],\n",
       "                [\n",
       "                    \"9\\u6708\",\n",
       "                    23.0\n",
       "                ],\n",
       "                [\n",
       "                    \"10\\u6708\",\n",
       "                    16.5\n",
       "                ],\n",
       "                [\n",
       "                    \"11\\u6708\",\n",
       "                    12.0\n",
       "                ],\n",
       "                [\n",
       "                    \"12\\u6708\",\n",
       "                    6.2\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf 1\",\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 3,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                2.0,\n",
       "                4.9,\n",
       "                7.0,\n",
       "                23.2,\n",
       "                25.6,\n",
       "                76.7,\n",
       "                135.6,\n",
       "                162.2,\n",
       "                32.6,\n",
       "                20.0,\n",
       "                6.4,\n",
       "                3.3\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf 2\",\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 4,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                2.6,\n",
       "                5.9,\n",
       "                9.0,\n",
       "                26.4,\n",
       "                28.7,\n",
       "                70.7,\n",
       "                175.6,\n",
       "                182.2,\n",
       "                48.7,\n",
       "                18.8,\n",
       "                6.0,\n",
       "                2.3\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5e73\\u5747\\u6e29\\u5ea6 1\",\n",
       "            \"connectNulls\": false,\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 5,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"1\\u6708\",\n",
       "                    2.0\n",
       "                ],\n",
       "                [\n",
       "                    \"2\\u6708\",\n",
       "                    2.2\n",
       "                ],\n",
       "                [\n",
       "                    \"3\\u6708\",\n",
       "                    3.3\n",
       "                ],\n",
       "                [\n",
       "                    \"4\\u6708\",\n",
       "                    4.5\n",
       "                ],\n",
       "                [\n",
       "                    \"5\\u6708\",\n",
       "                    6.3\n",
       "                ],\n",
       "                [\n",
       "                    \"6\\u6708\",\n",
       "                    10.2\n",
       "                ],\n",
       "                [\n",
       "                    \"7\\u6708\",\n",
       "                    20.3\n",
       "                ],\n",
       "                [\n",
       "                    \"8\\u6708\",\n",
       "                    23.4\n",
       "                ],\n",
       "                [\n",
       "                    \"9\\u6708\",\n",
       "                    23.0\n",
       "                ],\n",
       "                [\n",
       "                    \"10\\u6708\",\n",
       "                    16.5\n",
       "                ],\n",
       "                [\n",
       "                    \"11\\u6708\",\n",
       "                    12.0\n",
       "                ],\n",
       "                [\n",
       "                    \"12\\u6708\",\n",
       "                    6.2\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u84b8\\u53d1\\u91cf\",\n",
       "                \"\\u964d\\u6c34\\u91cf\",\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u84b8\\u53d1\\u91cf\": true,\n",
       "                \"\\u964d\\u6c34\\u91cf\": true,\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"left\": \"25%\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        },\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u84b8\\u53d1\\u91cf 1\",\n",
       "                \"\\u964d\\u6c34\\u91cf 2\",\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6 1\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u84b8\\u53d1\\u91cf 1\": true,\n",
       "                \"\\u964d\\u6c34\\u91cf 2\": true,\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6 1\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"left\": \"65%\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"axis\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"cross\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"1\\u6708\",\n",
       "                \"2\\u6708\",\n",
       "                \"3\\u6708\",\n",
       "                \"4\\u6708\",\n",
       "                \"5\\u6708\",\n",
       "                \"6\\u6708\",\n",
       "                \"7\\u6708\",\n",
       "                \"8\\u6708\",\n",
       "                \"9\\u6708\",\n",
       "                \"10\\u6708\",\n",
       "                \"11\\u6708\",\n",
       "                \"12\\u6708\"\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"1\\u6708\",\n",
       "                \"2\\u6708\",\n",
       "                \"3\\u6708\",\n",
       "                \"4\\u6708\",\n",
       "                \"5\\u6708\",\n",
       "                \"6\\u6708\",\n",
       "                \"7\\u6708\",\n",
       "                \"8\\u6708\",\n",
       "                \"9\\u6708\",\n",
       "                \"10\\u6708\",\n",
       "                \"11\\u6708\",\n",
       "                \"12\\u6708\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#5793f3\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 80,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#d14a61\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u6e29\\u5ea6\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#675bba\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} \\u00b0C\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"left\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 25,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": true,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#5793f3\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 80,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#d14a61\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u6e29\\u5ea6\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#675bba\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} \\u00b0C\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"left\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 25,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": true,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Grid-Overlap-\\u591a X/Y \\u8f74\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        },\n",
       "        {\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"right\": \"58%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        },\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"58%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_f37b29b8b61f4ce49686d145aeef8da5.setOption(option_f37b29b8b61f4ce49686d145aeef8da5);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f2e7c1429e8>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar, Grid, Line\n",
    "\n",
    "bar = (\n",
    "    Bar()\n",
    "    .add_xaxis([\"{}月\".format(i) for i in range(1, 13)])\n",
    "    .add_yaxis(\n",
    "        \"蒸发量\",\n",
    "        [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],\n",
    "        yaxis_index=0,\n",
    "        color=\"#d14a61\",\n",
    "    )\n",
    "    .add_yaxis(\n",
    "        \"降水量\",\n",
    "        [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],\n",
    "        yaxis_index=1,\n",
    "        color=\"#5793f3\",\n",
    "    )\n",
    "    .extend_axis(\n",
    "        yaxis=opts.AxisOpts(\n",
    "            name=\"蒸发量\",\n",
    "            type_=\"value\",\n",
    "            min_=0,\n",
    "            max_=250,\n",
    "            position=\"right\",\n",
    "            axisline_opts=opts.AxisLineOpts(\n",
    "                linestyle_opts=opts.LineStyleOpts(color=\"#d14a61\")\n",
    "            ),\n",
    "            axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "        )\n",
    "    )\n",
    "    .extend_axis(\n",
    "        yaxis=opts.AxisOpts(\n",
    "            type_=\"value\",\n",
    "            name=\"温度\",\n",
    "            min_=0,\n",
    "            max_=25,\n",
    "            position=\"left\",\n",
    "            axisline_opts=opts.AxisLineOpts(\n",
    "                linestyle_opts=opts.LineStyleOpts(color=\"#675bba\")\n",
    "            ),\n",
    "            axislabel_opts=opts.LabelOpts(formatter=\"{value} °C\"),\n",
    "            splitline_opts=opts.SplitLineOpts(\n",
    "                is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)\n",
    "            ),\n",
    "        )\n",
    "    )\n",
    "    .set_global_opts(\n",
    "        yaxis_opts=opts.AxisOpts(\n",
    "            name=\"降水量\",\n",
    "            min_=0,\n",
    "            max_=250,\n",
    "            position=\"right\",\n",
    "            offset=80,\n",
    "            axisline_opts=opts.AxisLineOpts(\n",
    "                linestyle_opts=opts.LineStyleOpts(color=\"#5793f3\")\n",
    "            ),\n",
    "            axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "        ),\n",
    "        title_opts=opts.TitleOpts(title=\"Grid-Overlap-多 X/Y 轴示例\"),\n",
    "        tooltip_opts=opts.TooltipOpts(trigger=\"axis\", axis_pointer_type=\"cross\"),\n",
    "        legend_opts=opts.LegendOpts(pos_left=\"25%\"),\n",
    "    )\n",
    ")\n",
    "\n",
    "line = (\n",
    "    Line()\n",
    "    .add_xaxis([\"{}月\".format(i) for i in range(1, 13)])\n",
    "    .add_yaxis(\n",
    "        \"平均温度\",\n",
    "        [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],\n",
    "        yaxis_index=2,\n",
    "        color=\"#675bba\",\n",
    "        label_opts=opts.LabelOpts(is_show=False),\n",
    "    )\n",
    ")\n",
    "\n",
    "bar1 = (\n",
    "    Bar()\n",
    "    .add_xaxis([\"{}月\".format(i) for i in range(1, 13)])\n",
    "    .add_yaxis(\n",
    "        \"蒸发量 1\",\n",
    "        [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],\n",
    "        color=\"#d14a61\",\n",
    "        xaxis_index=1,\n",
    "        yaxis_index=3,\n",
    "    )\n",
    "    .add_yaxis(\n",
    "        \"降水量 2\",\n",
    "        [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],\n",
    "        color=\"#5793f3\",\n",
    "        xaxis_index=1,\n",
    "        yaxis_index=4,\n",
    "    )\n",
    "    .extend_axis(\n",
    "        yaxis=opts.AxisOpts(\n",
    "            name=\"蒸发量\",\n",
    "            type_=\"value\",\n",
    "            min_=0,\n",
    "            max_=250,\n",
    "            position=\"right\",\n",
    "            axisline_opts=opts.AxisLineOpts(\n",
    "                linestyle_opts=opts.LineStyleOpts(color=\"#d14a61\")\n",
    "            ),\n",
    "            axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "        )\n",
    "    )\n",
    "    .extend_axis(\n",
    "        yaxis=opts.AxisOpts(\n",
    "            type_=\"value\",\n",
    "            name=\"温度\",\n",
    "            min_=0,\n",
    "            max_=25,\n",
    "            position=\"left\",\n",
    "            axisline_opts=opts.AxisLineOpts(\n",
    "                linestyle_opts=opts.LineStyleOpts(color=\"#675bba\")\n",
    "            ),\n",
    "            axislabel_opts=opts.LabelOpts(formatter=\"{value} °C\"),\n",
    "            splitline_opts=opts.SplitLineOpts(\n",
    "                is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)\n",
    "            ),\n",
    "        )\n",
    "    )\n",
    "    .set_global_opts(\n",
    "        xaxis_opts=opts.AxisOpts(grid_index=1),\n",
    "        yaxis_opts=opts.AxisOpts(\n",
    "            name=\"降水量\",\n",
    "            min_=0,\n",
    "            max_=250,\n",
    "            position=\"right\",\n",
    "            offset=80,\n",
    "            axisline_opts=opts.AxisLineOpts(\n",
    "                linestyle_opts=opts.LineStyleOpts(color=\"#5793f3\")\n",
    "            ),\n",
    "            axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "        ),\n",
    "        tooltip_opts=opts.TooltipOpts(trigger=\"axis\", axis_pointer_type=\"cross\"),\n",
    "        legend_opts=opts.LegendOpts(pos_left=\"65%\"),\n",
    "    )\n",
    ")\n",
    "\n",
    "line1 = (\n",
    "    Line()\n",
    "    .add_xaxis([\"{}月\".format(i) for i in range(1, 13)])\n",
    "    .add_yaxis(\n",
    "        \"平均温度 1\",\n",
    "        [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],\n",
    "        color=\"#675bba\",\n",
    "        label_opts=opts.LabelOpts(is_show=False),\n",
    "        xaxis_index=1,\n",
    "        yaxis_index=5,\n",
    "    )\n",
    ")\n",
    "\n",
    "overlap_1 = bar.overlap(line)\n",
    "overlap_2 = bar1.overlap(line1)\n",
    "\n",
    "grid = (\n",
    "    Grid(init_opts=opts.InitOpts(width=\"1200px\", height=\"800px\"))\n",
    "    .add(\n",
    "        overlap_1, grid_opts=opts.GridOpts(pos_right=\"58%\"), is_control_axis_index=True\n",
    "    )\n",
    "    .add(overlap_2, grid_opts=opts.GridOpts(pos_left=\"58%\"), is_control_axis_index=True)\n",
    "    #.render(\"grid_overlap_multi_xy_axis.html\")\n",
    ")\n",
    "grid.load_javascript()\n",
    "grid.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 直方图和折线图融合 "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"e2b8135e515a4aed88db69128c57b78c\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_e2b8135e515a4aed88db69128c57b78c = echarts.init(\n",
       "                    document.getElementById('e2b8135e515a4aed88db69128c57b78c'), 'white', {renderer: 'canvas'});\n",
       "                var option_e2b8135e515a4aed88db69128c57b78c = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                135,\n",
       "                36,\n",
       "                30,\n",
       "                54,\n",
       "                130,\n",
       "                116,\n",
       "                24\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                93,\n",
       "                95,\n",
       "                113,\n",
       "                91,\n",
       "                144,\n",
       "                91,\n",
       "                122\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"connectNulls\": false,\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u5c0f\\u7c73\",\n",
       "                    95\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u4e09\\u661f\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u534e\\u4e3a\",\n",
       "                    122\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u82f9\\u679c\",\n",
       "                    47\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u9b45\\u65cf\",\n",
       "                    76\n",
       "                ],\n",
       "                [\n",
       "                    \"VIVO\",\n",
       "                    57\n",
       "                ],\n",
       "                [\n",
       "                    \"OPPO\",\n",
       "                    106\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"connectNulls\": false,\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u5c0f\\u7c73\",\n",
       "                    32\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u4e09\\u661f\",\n",
       "                    59\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u534e\\u4e3a\",\n",
       "                    101\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u82f9\\u679c\",\n",
       "                    63\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u9b45\\u65cf\",\n",
       "                    99\n",
       "                ],\n",
       "                [\n",
       "                    \"VIVO\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"OPPO\",\n",
       "                    61\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        },\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"top\": \"48%\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u5468\\u4e00\",\n",
       "                \"\\u5468\\u4e8c\",\n",
       "                \"\\u5468\\u4e09\",\n",
       "                \"\\u5468\\u56db\",\n",
       "                \"\\u5468\\u4e94\",\n",
       "                \"\\u5468\\u516d\",\n",
       "                \"\\u5468\\u65e5\"\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u5c0f\\u7c73\",\n",
       "                \"\\u4e09\\u661f\",\n",
       "                \"\\u534e\\u4e3a\",\n",
       "                \"\\u82f9\\u679c\",\n",
       "                \"\\u9b45\\u65cf\",\n",
       "                \"VIVO\",\n",
       "                \"OPPO\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 1,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Grid-Bar\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        },\n",
       "        {\n",
       "            \"text\": \"Grid-Line\",\n",
       "            \"top\": \"48%\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"bottom\": \"60%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        },\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"top\": \"60%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_e2b8135e515a4aed88db69128c57b78c.setOption(option_e2b8135e515a4aed88db69128c57b78c);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f2e7c18c908>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar, Grid, Line\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "bar = (\n",
    "    Bar()\n",
    "    .add_xaxis(Faker.choose())\n",
    "    .add_yaxis(\"商家A\", Faker.values())\n",
    "    .add_yaxis(\"商家B\", Faker.values())\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Grid-Bar\"))\n",
    ")\n",
    "line = (\n",
    "    Line()\n",
    "    .add_xaxis(Faker.choose())\n",
    "    .add_yaxis(\"商家A\", Faker.values())\n",
    "    .add_yaxis(\"商家B\", Faker.values())\n",
    "    .set_global_opts(\n",
    "        title_opts=opts.TitleOpts(title=\"Grid-Line\", pos_top=\"48%\"),\n",
    "        legend_opts=opts.LegendOpts(pos_top=\"48%\"),\n",
    "    )\n",
    ")\n",
    "\n",
    "grid = (\n",
    "    Grid()\n",
    "    .add(bar, grid_opts=opts.GridOpts(pos_bottom=\"60%\"))\n",
    "    .add(line, grid_opts=opts.GridOpts(pos_top=\"60%\"))\n",
    "    #.render(\"grid_vertical.html\")\n",
    ")\n",
    "grid.load_javascript()\n",
    "grid.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
